<template>
	<view class="container">
		<view class="head">
			<view class="status-wrap">
				<text v-if="detailData?.order?.status === OrderStatus.FINISHED" class="status">订单已完成</text>
				<text v-else class="status">{{ OrderStatusLabel[detailData?.order?.status] }}</text>
				<text v-if="detailData?.order?.status === OrderStatus.FINISHED" class="time">感谢您的支持，欢迎下次光临~</text>
			</view>
			<image v-if="detailData?.order?.status === OrderStatus.UNPAID" class="icon-status"
				src="@/static/order/icon_status_paying.png" />
			<image v-if="detailData?.order?.status === OrderStatus.UNVERIFIED" class="icon-status"
				src="@/static/order/icon_status_using.png" />
			<image v-if="detailData?.order?.status === OrderStatus.DELIVERED" class="icon-status"
				src="@/static/order/icon_status_delivered.png" />
			<image v-if="detailData?.order?.status === OrderStatus.CANCELLED" class="icon-status"
				src="@/static/order/icon_status_cancelled_primary.png" />
			<image v-if="detailData?.order?.status === OrderStatus.FINISHED" class="icon-status"
				src="@/static/order/icon_status_finished.png" />
		</view>

		<view class="block">
			<Card>
				<view class="goods">
					<view class="img-warp">
						<image class="img" :src="BASE_OSS_URL + detailData?.order?.goods_image" />
					</view>
					<view class="detail-wrap">
						<view class="name">[{{ detailData?.order?.goods_name }}] {{ detailData?.order?.name }}</view>
						<view class="detail">
							<view>
								<text>数量：</text>
								<text>{{ detailData?.order?.number }}</text>
							</view>
							<view>
								<text>总价：</text>
								<text class="price">¥{{ detailData?.order?.price }}</text>
							</view>
						</view>
					</view>
				</view>
				<template v-if="[OrderStatus.UNVERIFIED, OrderStatus.FINISHED].includes(detailData?.order?.status)">
					<view class="ticket" :class="{ finished: detailData?.order?.status === OrderStatus.FINISHED }">
						<view class="divider" />
						<image />
						<view class="code-wrap">
							<text>券码</text>
							<text class="code">8288 5958 32</text>
						</view>
						<text class="hint">到店请出示消费券码</text>
					</view>
				</template>
			</Card>
		</view>

		<view
			v-if="[OrderStatus.UNPAID, OrderStatus.UNVERIFIED, OrderStatus.CANCELLED, OrderStatus.FINISHED].includes(detailData?.order?.status)"
			class="block with-guide">
			<Card>
				<view class="category" style="margin-bottom: 18rpx;">自提门店</view>
				<view class="goods">
					<view class="img-warp">
						<image class="img" :src="BASE_OSS_URL + detailData?.shop?.image" />
					</view>
					<view class="detail-wrap">
						<view class="name">{{ detailData?.shop?.name }}</view>
						<view class="detail">
							<view>
								<text>营业时间：</text>
								<text>
									{{ detailData?.order?.business_time ? dateFormat(detailData?.order?.business_time) : '' }}
								</text>
							</view>
							<view>
								<text>{{ detailData?.shop?.address }} </text>
							</view>
						</view>
					</view>
					<view class="guide-wrap" @click="guide">
						<image src="@/static/index/daohan.png" class="icon-guide" />
						<text>导航</text>
					</view>
				</view>
			</Card>
		</view>

		<view class="block order">
			<Card>
				<view class="category">订单信息</view>
				<view class="divider" />
				<view class="row">
					<text>订单模式</text>
					<text class="value">到店自提</text>
				</view>
				<view class="row">
					<text>实付金额</text>
					<text class="value price">-¥199.00</text>
				</view>
				<view class="row">
					<text>订单编号</text>
					<text class="value">{{ detailData?.order?.order_no }}</text>
				</view>
				<view class="row">
					<text>创建时间</text>
					<text class="value">
						{{ dateFormat(detailData?.order?.createtime) }}
					</text>
				</view>
			</Card>
		</view>

		<view class="footer">
			<view class="icon-wrap">
				<view class="icon">
					<image src="@/static/order/icon_shop.png" />
					<text>首页</text>
				</view>
				<view class="icon" @click="call">
					<image src="@/static/order/icon_phone.png" />
					<text>联系客服</text>
				</view>
			</view>
			<view v-if="detailData?.order?.status === OrderStatus.UNPAID" class="btn-wrap">
				<AButton :style="{ marginRight: '20rpx' }" @click="cancelOrderFn({ order_id: detailData?.order?.id })"> 取消订单
				</AButton>
				<AButton type="primary">去付款</AButton>
			</view>
			<view v-if="detailData?.order?.status === OrderStatus.UNVERIFIED" class="btn-wrap"
				@click="cancelOrderFn({ order_id: detailData?.order?.id })">
				<AButton :style="{ marginRight: '20rpx' }">取消订单</AButton>
				<AButton type="primary">再次购买</AButton>
			</view>
			<view v-if="detailData?.order?.status === OrderStatus.DELIVERED" class="btn-wrap">
				<AButton type="primary">确认收货</AButton>
			</view>
			<view v-if="[OrderStatus.CANCELLED, OrderStatus.FINISHED].includes(detailData?.order?.status)" class="btn-wrap">
				<AButton type="primary">再次购买</AButton>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import AButton from '@/components/abutton.vue'
	import Card from '@/components/Card/index.vue'
	import {
		orderDetail,
		cancelOrder
	} from '@/service/order'
	import {
		BASE_OSS_URL
	} from '@/utils/request'
	import {
		dateFormat
	} from '@/utils/index.js'
	import {
		showToast
	} from '@/utils/uniApi.js'
	import {
		OrderStatus,
		OrderStatusLabel
	} from '@/utils/constants'

	const id = ref('')
	const detailData = ref({
		order: {},
		shop: {},
	})
	const getOrderDetail = async (id) => {
		detailData.value = await orderDetail({
			order_id: id
		})
	}
	onLoad((query) => {
		id.value = query.id
		getOrderDetail(id.value)
	})
	const cancelOrderFn = async (data) => {
		console.log(data)
		await cancelOrder(data)
		showToast({
			title: '取消成功！',
		})
		getOrderDetail(id.value)
	}

	function guide() {
		uni.authorize({
			scope: 'scope.userLocation',
			success() {
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						console.log(res)
						uni.openLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(e) {
								console.log('success')
							},
						})
					},
					fail(e) {
						console.error(e)
					},
				})
			},
		})
	}

	function call() {
		uni.makePhoneCall({
			phoneNumber: '000',
			fail(e) {
				console.error(e)
			},
		})
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		padding: 0 28rpx 140rpx;
		background: $body-bc;
		color: $content-color;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx 0 26rpx;

			.status-wrap {
				padding-top: 40rpx;
				display: flex;
				flex-direction: column;

				.status {
					color: $title-color;
					font-size: 36rpx;
				}

				.time {
					margin-top: 25rpx;
					font-size: 26rpx;
					color: $accent-color;
				}
			}

			.icon-status {
				width: 140rpx;
				height: 175rpx;
			}
		}

		.block {
			margin-top: 24rpx;

			.category {
				font-size: 28rpx;
				color: $title-color;
			}

			.divider {
				width: 100%;
				height: 1rpx;
				margin: 26rpx 0 36rpx;
				background-color: $border-color;
			}

			.row {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;

				.value {
					color: $title-color;
				}
			}

			.row+.row {
				margin-top: 40rpx;
			}

			.goods {
				display: flex;

				.img-warp {
					flex-shrink: 0;
					width: 150rpx;
					height: 150rpx;
					margin-right: 25rpx;
					border-radius: 10rpx;
					overflow: hidden;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.detail-wrap {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 26rpx;
						color: $title-color;
					}

					.detail {
						font-size: 22rpx;
					}
				}
			}

			.ticket {
				display: flex;
				flex-direction: column;
				align-items: center;

				.divider {
					margin: 30rpx 0 50rpx;
				}

				image {
					width: 228rpx;
					height: 230rpx;
					margin-bottom: 40rpx;
					border: 1rpx solid $accent-color;
				}

				.code-wrap {
					margin-bottom: 22rpx;
					padding: 15rpx 36rpx;
					border-radius: 40rpx;
					background-color: #01193c;
					font-size: 26rpx;

					.code {
						margin-left: 24rpx;
						font-size: 34rpx;
						color: $title-color;
					}
				}

				.hint {
					font-size: 24rpx;
				}

				&.finished {
					.code {
						text-decoration: line-through;
					}
				}
			}

			&.with-guide {
				.goods {
					.detail-wrap .name {
						font-size: 28rpx;
					}

					.guide-wrap {
						flex-shrink: 0;
						align-self: flex-end;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 20rpx;
						color: $title-color;

						.icon-guide {
							width: 52rpx;
							height: 52rpx;
							margin-bottom: 13rpx;
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 14rpx 28rpx 14rpx 56rpx;
			background-color: $card-bc;

			.icon-wrap {
				display: flex;
				align-items: center;

				.icon {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					color: $title-color;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 14rpx;
					}

					&:first-child {
						margin-right: 55rpx;
					}
				}
			}
		}
	}

	.price {
		color: $accent-color !important;
	}
</style>